<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>标题</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: red;
      display: none;
    }
  </style>
</head>
<body>
  <input type="button" value="淡入" id="fadeIn"/>
  <input type="button" value="淡出" id="fadeOut"/>
  <input type="button" value="切换" id="fadeToggle"/>
  <input type="button" value="淡入到那里" id="fadeTo"/><br/><br/>
  <div id="div1"></div>
</body>
</html>
<script src="jquery-1.12.4.js"></script>
<script>
  $(function () {
    $('#fadeIn').click(function(){
    // 有两个参数
    // 1.控制时间的   fast normal slow  2.回调函数
    $('#div1').fadeIn(1000) 
  })
  $('#fadeOut').click(function(){
    // 有两个参数
    // 1.控制时间的   fast normal slow  2.回调函数
    $('#div1').fadeOut(1000) 
  })
  $('#fadeToggle').click(function(){
    // 有两个参数
    // 1.控制时间的   fast normal slow  2.回调函数
    $('#div1').fadeToggle(1000) 
  })
  $('#fadeTo').click(function(){
    // 有两个参数
    // 1.控制时间的   fast normal slow  2.回调函数
    $('#div1').fadeTo(1000,0.5) 
  })
  });
</script>